<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的工单</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link href="/static/logistics/gijgo-combined-1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/logistics/css/toast.css">
    <link href="/static/logistics/css/simple-bs-dialog.css" rel="stylesheet">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>

<div class="bg-light" id="workOrderApp">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <div class="row">
                    <div class="col-sm-2 text-right">
                        <span class="text-warning align-middle">工单投诉时间</span>

                    </div>
                    <div class="col-sm-2">
                        <input id="startTime" />
                    </div>
                    <div class="col-sm-2">
                        <input id="endTime" />
                    </div>
                    <div class="col-sm-5">
                        <button type="button" class="btn btn-warning" @click="queryWorkOrderByDate">查询</button>
                        <button type="button" class="btn btn-light" @click="resetDate">重置</button>
                    </div>
                </div>
                <div class="row mt-2" style="margin-bottom: 30%;">
                    <div class="col-sm-12">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">序号</th>
                                <th scope="col">订单号</th>
                                <th scope="col">工单时间</th>
                                <th scope="col">处理状态</th>
                                <th scope="col">工单内容</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(workOrder,index) in workOrderList">
                                <th scope="row">{{index+1}}</th>
                                <td>{{workOrder.orderNo}}</td>
                                <td>{{workOrder.workOrderBeginTime}}</td>
                                <td>
                                    <span class="badge badge-secondary" v-if="workOrder.workOrderStatus == 0">未回复</span>
                                    <span class="badge badge-primary" v-if="workOrder.workOrderStatus == 1">正在受理</span>
                                    <span class="badge badge-success" v-if="workOrder.workOrderStatus == 2">已完成</span>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary" @click="workOrderDetail(index)">查看详情</button>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-success" v-if="workOrder.workOrderStatus < 2" @click="updateWorkOrderStatus(workOrder.workOrderId,index)">完成</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>


        </div>
    </div>

    <!-- 查看工单详情模态框 -->
    <div class="modal fade" id="workOrderModalId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">工单详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row p-2">
                        <div class="col-sm-6">
                            <i class="fa fa-question-circle"></i>
                            <span class="text-secondary">问题类型：</span>
                            <span class="text-body">{{workOrder.questionType}}</span>
                        </div>
                        <div class="col-sm-6">
                            <i class="fa fa-calendar"></i>
                            <span class="text-secondary">工单发起时间：</span>
                            <span class="text-body">{{workOrder.workOrderBeginTime}}</span>

                        </div>
                        <hr class="my-3" />
                        <div class="col-sm-6">

                            <span class="text-secondary">姓名：</span>
                            <span class="text-body">{{workOrder.customerName}}</span>

                        </div>
                        <div class="col-sm-6">

                            <span class="text-secondary">手机：</span>
                            <span class="text-body">{{workOrder.customerTel}}</span>

                        </div>
                        <hr class="my-3" />
                        <div class="col-sm-12 p-2">

                            <div class="card">
                                <div class="card-body" v-for="(content,index) in workOrder.workOrderContentList">
                                    <div class="row">
                                        <div class="col-sm-12 text-right">
                                            <span class="text-secondary d-block">{{content.createTime}}</span>
                                            <span class="badge badge-success text-wrap font-weight-bold" style="width: 15rem;font-size: 15px;">{{content.customerContent}}</span>
                                        </div>
                                        <div class="col-sm-12 text-left">
                                            <span v-if="content.replyContent != '' && content.replyContent != null" class="d-block"><i class="text-primary fa fa-user mr-1"></i>员工号：{{workOrder.employeeNo}}</span>
                                            <span v-if="content.replyContent != '' && content.replyContent != null" class="badge badge-success text-wrap font-weight-bold" style="width: 15rem;font-size: 15px;">{{content.replyContent}}</span>
                                            <span v-else><i class="text-primary fa fa-user mr-1"></i>此内容客服还未回复哦！</span>
                                        </div>

                                    </div>


                                </div>
                            </div>
                        </div>
                        <!-- 发送回复 -->
                        <div class="col-sm-12 mt-3">

                            <div v-if="workOrder.workOrderStatus < 2" class="form-group row">
                                <label for="exampleFormControlTextarea1" class="col-sm-2 col-form-label">回复</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" v-model="workOrderMsg" id="exampleFormControlTextarea1" rows="3"></textarea>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="modal-footer" >
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button v-if="workOrder.workOrderStatus < 2" type="button" class="btn btn-primary" @click="submitWorkOrderContent">提交</button>
                </div>
            </div>
        </div>
    </div>

</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>

<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/home/js/workOrder.js"></script>
<script src="/static/logistics/js/toast.js"></script>
<script src="/static/logistics/js/simple-bs-dialog.js"></script>
<script>
    $('#startTime').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
    $('#endTime').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
</script>
</body>
</html>
